<template>
  <div class="Home-Wrap">
    <div class="banner-bg-pannel"></div>
    <div class="inner-containner">
      <div>
        <div class="logo-and-title">
          <div class="logo-wrap">
            <img src="~@/assets/images/head-portrait.png" alt="">
          </div>
          <div class="company-name">上海晨光科力普办公用品有限公司</div>
        </div>
        <div class="editor">
          <div class="editor-tips-line">
            <div>切换角色</div>
            <div>信息维护</div>
            <div>信息查看</div>
          </div>
          <div class="editor-tips-line">
            <div>新增服务类别</div>
            <div>修改银行信息</div>
          </div>
        </div>
        <div class="pannel-container">
          <div v-for="(item,index) in btnlist" :key="index" @mouseenter="changeImage(index)" @mouseleave="changeImage1(index)">
            <div>
              <img :src="item.src" alt="" v-show="switchNice[index].disappear">
              <img :src="item.hoversrc" alt="" v-show="switchNice[index].appear">
              <div v-if="item.num<10&&item.num>0">{{item.num}}</div>
              <div v-if="item.num>=10" style="border-radius: 10px;width:22px">{{item.num}}</div>
            </div>
            <div>{{item.title}} <br>
              {{item.subtitle}}</div>
          </div>                  
        </div>
      </div>
      <div class="right-pannel">
        <div class="container">
          <div v-for="(item,index) in noticeList" :key="index">
              <div class="right-panel-left">
                  <div class="left-title">
                      {{item.companyName}}:
                  </div>
                  <div class="left-desc">
                      {{item.desc}}
                  </div>
              </div>
              <div class="right-panel-right">
                <el-steps :active="3" align-center>
                  <el-step title="注册" icon="el-icon-circle-check"></el-step>
                  <el-step title="信息审查" icon="el-icon-circle-check"></el-step>
                  <el-step title="现场考察" description="考察中" icon="el-icon-time"></el-step>
                  <el-step title="入库" icon="el-icon-remove-outline"></el-step>
                </el-steps>
              </div>  
          </div>         
      </div>
        <div class="main-info-list">
          <div class="info-title">
            消息
          </div>

          <div class="info-item" v-for="(item,index) in list" :key="index">
            <div v-show="item.prompt"></div>
            <div class="content">
              <div class="desc">{{item.desc}}</div>
              <div class="btn">
                  <el-button type="primary" plain v-if="item.currentnode">{{item.currentnode}}</el-button>
                  <el-button type="primary" plain v-if="item.currentnode1">{{item.currentnode1}}</el-button>
              </div>  
            </div>
            <div class="foot">
              <div>
                <img src="~@/assets/images/time-logo.png" alt="">
                <div class="date">{{item.date}}</div>
              </div>   
              <div class="current-node" v-if="item.currentnode">当前节点：{{item.currentnode}}
                <div v-if="item.currentnode1">、</div>
                {{item.currentnode1}}</div>
            </div>

          </div>

            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                v-model:currentPage="currentPage"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000">
              </el-pagination>
              <el-button  style="width:50px;min-height:30px;padding:0">确定</el-button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { postLogin } from "@/api/login/index";

  export default defineComponent({
    components: {},
    setup() {
      const firehttp = async () => {
        let result = await postLogin({
          username: "xxx",
          password: "123",
        });
      };
      firehttp();
    },
    data(){
      return{
        noticeList:[
          {
            companyName:"江苏区域集团",
            desc:"信息化类/招采及供应商管理软件开发及实施"
          },
        ],
        btnlist:[
          {
            title:"上传",
            subtitle:"考察资料",
            src:require("../../../assets/images/upload-logo.png"),
            hoversrc:require("../../../assets/images/upload-hover.png"),
          },
          {
            title:"邀请函/",
            subtitle:"承诺函",
            src:require("../../../assets/images/invitation-logo.png"),
            hoversrc:require("../../../assets/images/invitation-hover.png")
          },
          {
            title:"补充文件",
            src:require("../../../assets/images/file-logo.png"),
            hoversrc:require("../../../assets/images/file-hover.png")
          },
          {
            title:"质疑/答疑",
            src:require("../../../assets/images/question-logo.png"),
            hoversrc:require("../../../assets/images/question-hover.png"),
            num:1,
          },
          {
            title:"标书下载/",
            subtitle:"回标",
            src:require("../../../assets/images/tender-logo.png"),
            hoversrc:require("../../../assets/images/tender-hover.png")
          },
          {
            title:"澄清函",
            src:require("../../../assets/images/message-logo.png"),
            hoversrc:require("../../../assets/images/message-hover.png")
          },
          {
            title:"约谈",
            src:require("../../../assets/images/chat-logo.png"),
            hoversrc:require("../../../assets/images/chat-hover.png")
          },
          {
            title:"中标通知书",
            src:require("../../../assets/images/book-logo.png"),
            hoversrc:require("../../../assets/images/book-hover.png"),
            num:12
          },
          {
            title:"感谢信",
            src:require("../../../assets/images/note-logo.png"),
            hoversrc:require("../../../assets/images/note-hover.png")
          },
          {
            title:"绩效改进",
            src:require("../../../assets/images/people-logo.png"),
            hoversrc:require("../../../assets/images/people-hover.png"),
            num:3
          },
          {
            title:"工作联系函",
            src:require("../../../assets/images/connect-logo.png"),
            hoversrc:require("../../../assets/images/connect-hover.png")
          },
        ],
        currentPage:1,
        switchNice:[
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
          {
            disappear:true,
            appear:false,
          },
        ],       
        list:[
          {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            currentnode:"承诺函",
          },
           {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            currentnode:"质疑",
            currentnode1:"回标"
          },
          {
            desc:"南沙横沥岛兴胜家园项目桩基检测工程征询函已发送，请及时前往征询函回函",
            date:"2021-3-11 12:00发布",
            currentnode:"承诺函",

          },
           {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            prompt:true
          },
          {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            currentnode:"承诺函",
        
          },
           {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            currentnode:"承诺函",
            
          },
          {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            currentnode:"承诺函",
          
          },
           {
            desc:"贵司已通过上海天华信息集团的初步审核，请知悉",
            date:"2021-3-11 12:00发布",
            currentnode:"承诺函",
          },
        ]
      }
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      changeImage(index){
        this.switchNice[index].disappear=false
        this.switchNice[index].appear=true

      },
      changeImage1(index){
        this.switchNice[index].disappear=true
        this.switchNice[index].appear=false
      }
    }
  });
</script>

<style lang="scss" scoped>
.Home-Wrap {
  background: #f0f2f5;
  // height: 100%;
}

.inner-containner {
  width: 1164px;
  // background: white;
  margin: 60px auto 0;
  transform: translateY(-300px);
  display: flex;
  justify-content: space-between;
  & > div:nth-child(1) {
    flex: 1;
    padding-right: 25px;
  }
  & > div:nth-child(2) {
    width: 868px;
    // background: white;
  }
}

.banner-bg-pannel {
  background: #2897ff;
  height: 295px;
}

.logo-and-title {
  width: 100%;
  margin-bottom: 25px;
  .logo-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: violet;
    margin: 0 auto;
    margin-bottom: 8px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .company-name {
    text-align: center;
    width: 234px;
    height: 49px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 24px;
    color: #ffffff;
    margin: 0 auto;
  }
}

.editor {
  .editor-tips-line {
    display: flex;
    justify-content: space-between;
    & > div {
      line-height: 32px;
      background: #71BAFF;
      opacity: 0.34;
      border-radius: 2px;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      opacity: 1;
    }
  }
  .editor-tips-line:nth-child(1) {
    & > div {
      width: 86px;
      height: 32px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    margin-bottom: 4px;
  }
  .editor-tips-line:nth-child(2) {
    & > div {
      width: 131px;
      height: 32px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
  }
}

.pannel-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 25px;
  justify-content: space-between;
  &>div:hover{
    background: #1890FF;
    box-shadow: 0px 3px 6px rgba(24, 144, 255, 0.3);
    opacity: 1;
    &>div:nth-child(2){
      color: #ffffff;
    }
  }
  & > div {
    width: 82px;
    height: 82px;
    background: #f5f7fc;
    opacity: 1;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
    & > div:nth-child(1) {
      width: 20px;
      height: 20px;
      margin: 20px auto 10px;
      position: relative;
      // background: chartreuse;
      & > img {
        width: 100%;
        height: 100%;
      }
      &>div{
        width:16px;
        height: 16px;
        font-size: 14px;
        color: #ffffff;
        position: absolute;
        top: -10px;
        left: 25px;
        background: red;
        border-radius: 50%;
      }
    }
    & > div:nth-child(2) {
      height: 17px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 14px;
      color: #333333;
      opacity: 1;
    }
  }
  & > div:last-child {
    transform: translateX(-95px);
  }
}

.right-pannel {
  & > div:nth-child(1) {
    background: white;
    margin-bottom: 10px;
    &>div{
      display: flex;
      align-items: center;
      min-height: 106px;
      border-bottom: 1px solid #DCDCDC;
      /deep/ .el-step__line{
        top: 8px;
      }
      /deep/ .el-step__icon{
       width:14px;
       height: 14px;
      }
    }
  }
  & > div:nth-child(2) {
    background: white;
    min-height: 500px;
  }
  .main-info-list {
    padding: 10px 24px;
    .info-title {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 33px;
      color: #333333;
      opacity: 1;
      padding: 28px 0 25px;
    }
    .info-item {
      padding: 25px;
      width: 100%;
      height: 96px;
      background: #f5f7fc;
      opacity: 1;
      margin-bottom: 14px;
      position: relative;
      &>div:nth-child(1){
        position:absolute;
        left: 15px;
        top: 25px;
        width: 8px;
        height: 8px;
        background: #FF0014;
        border-radius: 50%;
        opacity: 1;
      }
      &> div {
        display: flex;
        justify-content: space-between;
        div{
          display: flex;
          align-items: center;
           img{
          width: 16px;
          height: 16px;
          }
        }
        .desc{
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 22px;
          color: #333333;
          opacity: 1;
        }
        /deep/ .el-button{
          width: 56px;
          min-height: 28px;
          padding: 0;
          span{
            font-size: 14px;
          }
        }
        .date{
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 16px;
          color: #999999;
          opacity: 1;
          margin-left: 5px;
        }
        .current-node{
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 17px;
          color: #999999;
          opacity: 1;
          padding-top: 5px;
        }
      }
    }
  }
}


//消息上方部分
.right-panel-left{
  width: 50%;
  margin-left: 20px;
  .left-title{
    width: 84px;
    height: 17px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 17px;
    color: #999999;
    opacity: 1;
  }
  .left-desc{
    width: 312px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 22px;
    color: #333333;
    opacity: 1;
  }
}
.right-panel-right{
  width: 50%;

  /deep/ .el-step__title.is-finish{
    color: #192A56;
    font-weight: 400;
  }
  /deep/ .el-step__title.is-process{
    font-weight: 400;
    color: #192A56;
  }
}


//分页
@mixin btn-edit{
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    padding: 6px;
    min-width: 30px;
    height: 30px;
    margin: 3px;
}

.block{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /deep/ .btn-prev,/deep/ .btn-next{
    @include btn-edit;
  }
  /deep/ .number{
    @include btn-edit;
    line-height: normal
  }
  /deep/ .el-pagination__jump{
    height: 35px;
    line-height: 35px;
  }
}

/deep/ .el-step__title{
  font-size: 14px;
}
/deep/ .el-step__icon-inner:not(.is-status) {
  font-size: 14px;
}
</style>

